<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <!-- 
         一、判断环境
         navigator是HTML的内置对象；
         userAgent是navigator的属性方法，可以返回客户机发送服务器的头部信息。作用是返回当前用户所使用的什么浏览器；
         toLowerCase()转换为小写。区分Android、iphone、ipad：
         二、小程序
         -->
    </div>
    <div class="box">
        什么颜色
    </div>
    <button onclick="btnFun" id="btn">按钮</button>
    <script>
        //获取当前环境
        function getEnvironment() {
            //判断当前环境（微信/其他）
            let ua = navigator.userAgent.toLowerCase();
            console.log(navigator,'navigator是啥');
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                console.log("微信中")
                var d = document.getElementsByClassName("box") //拿到要换颜色的div标签的id赋值给d
                d[0].style.background = "yellow"
                d[0].innerHTML = "我在微信中打开"
                document.getElementById("btn").style.display = "none";//显示
            } else {
                console.log("其他（浏览器等等）")
                var d = document.getElementsByClassName("box") //拿到要换颜色的div标签的id赋值给d
                d[0].style.background = "chartreuse"
                d[0].innerHTML = "我在其他浏览器中打开"
                document.getElementById("btn").style.display = "inline"; //隐藏
                //  window.location.href= "weixin://"
            }
        }
        getEnvironment()
    </script>
    <script>
        let btn = document.getElementById("btn")
        btn.onclick = function () {
            window.location.href = "weixin://"    //跳微信app
        }
    </script>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
    </style>
</body>

</html>
